<script src="__CDN__/assets/addons/exam/js/vue.js"></script>
<div id="app">
<form id="import-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Cate_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-cate_id" data-rule="required" data-source="exam/cate/selectpage" data-params='{"custom[kind]":"QUESTION","isTree":true}' class="form-control selectpage" name="row[cate_id]" type="text" value="">
        </div>
    </div>

    <!--<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Exam_type_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-exam_type_id" data-rule="required" data-source="exam_type/index" class="form-control selectpage" name="row[exam_type_id]" type="text" value="">
        </div>
    </div>-->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2 required" >{:__('Kind')}:</label>
        <div class="col-xs-12 col-sm-8">

            <div class="radio">
                {foreach name="kindList" item="vo"}
                <label for="row[kind]-{$key}">
                    <input @change="changeKind" id="row[kind]-{$key}" name="row[kind]" type="radio" value="{$key}"  /> {$vo}
                </label>
                {/foreach}
            </div>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">选择文件:</label>
        <div class="col-xs-12 col-sm-8">
            <a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('exam/question/import')?'':'hide'}" title="{:__('Import')}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="fa fa-upload"></i> {:__('Import')}</a>
            <input type="hidden" id="file_url">
            <label id="question_count" class="m-l-10"></label>
            <!--<input id="test" type="button" value="test">-->
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">模板文件:</label>
        <div class="col-xs-12 col-sm-8">
            <a href="javascript:void(0);" @click.prevent="downloadtemplate" id="downloadtemplate" target="_blank" class="btn btn-success" title="点击下载模板文件"><i class="fa fa-download"></i> 点击下载模板文件</a>
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
</div>
<script>
    var valid_result = true;
    var app = new Vue({
        el: '#app',
        data: {
            title: '',
            kind: '',
            href:''
        },
        methods: {
            changeKind(e) {
                let kind =$("input[type=radio][name='row[kind]']:checked").val();
                var ar = {'JUDGE': '判断题', 'SINGLE': '单选题', 'MULTI': '多选题', 'FILL': '填空题', 'SHORT': '问答题', 'WORD': '词汇题'};
                $('#downloadtemplate').text('点击下载'+ar[kind]+'模板文件')
                $('#tishi').remove()
                this.kind = e.target.value
                this.hideMaterial()
                this.hideTitle(this.kind)
            },
            downloadtemplate(){
                let kind =$("input[type=radio][name='row[kind]']:checked").val();
                if(typeof kind === 'undefined'){
                    $('.radio').append('<span role="alert" id="tishi" class="msg-wrap n-error"><span class="n-icon"></span><span class="n-msg">所属题库不能为空</span></span>')
                    return false;
                }
                var ar = {'JUDGE': '判断题', 'SINGLE': '单选题', 'MULTI': '多选题', 'FILL': '填空题', 'SHORT': '问答题', 'WORD': '词汇题'};

                window.open('/assets/addons/exam/template/'+ar[kind]+'导入模板.xlsx')
            },
            hideTitle(kind) {
                if (kind == 'FILL') {
                    this.showTitleEditor = false
                    this.showTitleFill = true
                    $('#c-title1').hide()
                    $('#c-title2').show()
                } else {
                    this.showTitleEditor = true
                    this.showTitleFill = false
                    $('#c-title1').show()
                    $('#c-title2').hide()
                }

                console.log('hideTitle', kind, this.showTitleEditor, this.showTitleFill)
            },
            hideMaterial() {
                if (this.isMaterialChild == 1) {
                    $('label[for="row[kind]-MATERIAL"]').hide()
                    $('.is_material_child').show()
                } else {
                    $('label[for="row[kind]-MATERIAL"]').show()
                    $('.is_material_child').hide()
                }

                if (this.kind == 'MATERIAL') {
                    $('#is_material_child').hide()
                } else {
                    $('#is_material_child').show()
                }
            }
        }
    })
</script>
